<template>
  <div class="login-container">
    <div class="form-area">
      <ul class="title">
        <li class="btn">欢迎来到猩猩影视</li>
      </ul>
      <login-form
      ref="loginRef"
      :config="config"
      :form="form"
      :rules="loginRule"
      ></login-form>
      <div class="ope-area">
          <div class="register-btn" @click="goToRegister">去注册</div>
          <div class="forgot-btn">忘记密码</div>
        </div>
      <div class="ope-btn" @click="submitLogin">登 录</div>
    </div>
  </div>
</template>
<script>
import LoginForm from '../../../components/login-form/login-form.vue'
export default {
  components: {
    LoginForm
  },
  methods: {
    goToRegister () {
      this.$router.push({
        path: '/user/register'
      })
    },
    async submitLogin () {
      const that = this
      this.$refs.loginRef.validate(async data => {
        if (!data.username) {
          that.$message.error('请输入您的账号')
          return
        }
        if (!data.password) {
          that.$message.error('请输入您的密码')
          return
        }
        await this.$store.dispatch('DO_LOGIN', data)
        let path = ''
        if (this.$route.query.redirect) {
          path = decodeURIComponent(this.$route.query.redirect)
        } else {
          path = '/movie/list'
        }
        this.$router.push({
          path
        })
      })
    }
  },
  data: () => {
    return {
      // vCode: "",
      form: {},
      config: [
        { key: 'username', label: '账号', placeholder: '您的账号', icon: 'iconfont icon-user' },
        { key: 'password', label: '密码', placeholder: '您的密码', icon: 'iconfont icon-password', type: 'password' }
      ],
      loginRule: {
        username: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入账号', trigger: 'blur' }]
      }
    }
  }
}
</script>
<style scoped>
@import url(../../../global.css);
input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}
.login-container {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://s.image.vcinema.com.cn/doras_web/imgs/background.jpg?x-oss-process=image/resize,p_80');
  background-size: cover;
}
.form-area {
  position: absolute;
  width: 400px;
  height: 330px;
  background: #222;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -265px;
  padding: 50px;
}
.form-area .title {
  text-align: center;
  font-size: 18px;
  color:#fff;
  font-size: 28px;
}

.ope-btn {
  width: 300px;
  margin: 0 auto;
  padding: 9px 0;
  font-size: 16px;
  border-radius: 4px;
  background: #333;
  text-align: center;
  color: #9f9f9f;
  cursor: pointer;
}

.ope-area {
  width: 300px;
  margin: 0 auto 15px;
  overflow: auto;
  font-size: 14px;
}
.ope-area .register-btn {
  float: left;
  color: #f42c2c;
  font-weight: 500;
  cursor: pointer;
}
.ope-area .forgot-btn {
  float: right;
  color: #999;
  cursor: pointer;
}
</style>
